<template>
    <div class="jianzhan-content">
        <crumb :name="$t('oil.oil')"> </crumb>
        <div class="content">
            <el-button type="primary" icon="el-icon-plus" @click="openAdd">{{$t('add')}}</el-button>
            <el-button type="primary" icon="el-icon-s-data" @click="openChart">{{$t('oil.chart')}}</el-button>
            <label for="excel" icon="el-icon-plus"><i class="el-icon-upload"></i> {{$t('upload')}}</label>
            <input type="file" id="excel" ref="file" v-show="false" @change="fileChange">
            <div class="table-wrapper">
                <el-table
                        :data="oilList"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="orderNumber"
                            :label="$t('oil.orderNo')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="orderDateStr"
                            :label="$t('oil.date')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="unitNo"
                            :label="$t('oil.unit')">
                    </el-table-column>
                    <el-table-column
                            prop="kmHm"
                            :label="$t('oil.hmkm')">
                    </el-table-column>
                    <el-table-column
                            prop="qty"
                            :label="$t('oil.qty')">
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-edit" @click="openEdit(scope.row)">{{$t('edit')}}</el-button>
                            <el-button type="text" icon="el-icon-s-data" @click="open(scope.row)">{{$t('oil.chart')}}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
                title="Oil"
                :visible.sync="dialogVisible"
                width="80%%"
        >
            <el-form ref="form" :model="oil" label-width="130px">
                <el-form-item :label="$t('oil.orderNo')">
                    <el-input v-model="oil.orderNumber" :placeholder="$t('oil.orderNo')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('oil.date')">
                    <el-date-picker v-model="oil.orderDateStr" type="date" value-format="yyyy-MM-dd"
                                    :placeholder="$t('oil.date')"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('oil.oilType')">
                    <el-input v-model="oil.oilType" disabled></el-input>
                </el-form-item>
                <el-form-item :label="$t('oil.unit')">
                    <el-select v-model="oil.unitNo" clearable @change="selectChange" :placeholder="$t('oil.unit')">
                        <el-option
                                v-for="item in equipmentList"
                                :key="item.plateNum"
                                :label="item.plateNum"
                                :value="item.plateNum">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('oil.unitType')">
                    <el-input v-model="oil.unitType" placeholder="Unit Type" disabled></el-input>
                </el-form-item>
                <el-form-item :label="$t('oil.hmkm')">
                    <el-input v-model="oil.kmHm" :placeholder="$t('oil.hmkm')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('oil.qty')">
                    <el-input v-model="oil.qty" :placeholder="$t('oil.qty')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('oil.purpose')">
                    <el-input v-model="oil.purpose" :placeholder="$t('oil.purpose')"></el-input>
                </el-form-item>

                <el-form-item :label="$t('oil.department')">
                    <el-input v-model="oil.applicationDepartment" :placeholder="$t('oil.department')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="submitForm">{{$t('confirm')}}</el-button>
          </span>
        </el-dialog>
        <el-dialog
                :title="$t('oil.chart')"
                :visible.sync="chartVisible"
                width="100%"
        >
            <div class="chart">
                <div class="flex">
                    <el-select size="small" style="margin-right: 20px;" v-model="plateNum" clearable
                               placeholder="Plate Number">
                        <el-option
                                v-for="item in equipmentList"
                                :key="item.plateNum"
                                :label="item.plateNum"
                                :value="item.plateNum">
                        </el-option>
                    </el-select>
                    <el-button-group>
                        <el-button type="primary" class="f1" @click="method = 3">{{$t('week')}}</el-button>
                        <el-button type="danger" class="f1" @click="method = 2">{{$t('month')}}</el-button>
                        <el-button type="warning" class="f1" @click="method = 1">{{$t('year')}}</el-button>
                    </el-button-group>

                </div>
                <bar-chart :options="options"></bar-chart>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="chartVisible = false">{{$t('cancel')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import crumb from '../../components/common/crumb'
    import {addOil, getEquipment, modOil, oilChart, oilExcel, oilList} from "../../api/service";
    import barChart from '../../components/shanxi/barChart'
    import {ERROR_OK} from "../../util/config";
    import * as moment from "moment";

    export default {
        name: "oil",
        components: {
            crumb,
            barChart
        },
        data() {
            return {
                oilList: [],
                dialogVisible: false,
                chartVisible: false,
                plateNum: '',
                data: [],
                day: [],
                method: 2,
                year: moment().year(),
                month: moment().month() + 1,
                weekNumber: moment().week(),
                oil: {
                    orderNumber: '',
                    orderDateStr: '',
                    oilType: '柴油Fuel',
                    unitNo: '',
                    unitType: '',
                    kmHm: '',
                    qty: '',
                    purpose: '',
                    applicationDepartment: ''
                },
                equipmentList: []
            }
        },
        computed: {
            options() {
                return {
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                title: 'Save As Image'
                            },
                            dataView: {
                                show: true,
                                title: 'Data View'
                            },
                        },
                    },
                    title: {
                        text: '油量'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: this.day
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [{
                        data: this.data,
                        smooth: true,
                        type: 'line'
                    }]
                }
            }
        },
        created() {
            this.getOilList();
            this.getEquipmentList()
        },
        methods: {
            async fileChange(e) {
                let formData = new FormData();
                Array.prototype.forEach.call(e.target.files,item=>{
                    formData.append('exFiles',item);
                });
                const {status} = await oilExcel(formData);
                if(status === ERROR_OK) {
                    this.getOilList();
                    this.$refs.file.value = '';
                    this.$message.success('上传成功')
                } else{
                    this.$message.error('上传失败')
                    this.$refs.file.value = '';
                }

            },
            open(row) {
                this.plateNum = row.unitNo;
                this.getChart();
                this.chartVisible = true
            },
            async getChart() {
                const {status, data} = await oilChart({method: this.method, plateNum: this.plateNum});
                if (status === ERROR_OK) {
                    this.day = Object.keys(data).map((item) => {
                        if (this.method === 1) {
                            return item + ' 年'
                        }
                        if (this.method === 2) {
                            return item + ' 月'
                        }
                        if (this.method === 3) {
                            return item
                        }
                    });
                    this.data = Object.keys(data).map(item => {
                        return data[item] ? data[item] : 0
                    });
                }

            },
            openChart() {
                this.chartVisible = true;
                this.getChart()
            },
            async submitForm() {
                const {id, orderNumber, orderDateStr, oilType, unitNo, unitType, kmHm, qty, purpose, applicationDepartment} = this.oil;
                if (id) {
                    const {status, msg} = await modOil({
                        id,
                        orderNumber,
                        orderDateStr,
                        oilType,
                        unitNo,
                        unitType,
                        kmHm,
                        qty,
                        purpose,
                        applicationDepartment
                    });
                    if (status === ERROR_OK) {
                        this.getOilList();
                        this.clear();
                        this.$message.success(this.$t('modifySuccess'));
                        this.dialogVisible = false
                    } else {
                        this.$message.error(msg)
                    }
                } else {
                    const {status, msg} = await addOil({
                        orderNumber,
                        orderDateStr,
                        oilType,
                        unitNo,
                        unitType,
                        kmHm,
                        qty,
                        purpose,
                        applicationDepartment
                    });
                    if (status === ERROR_OK) {
                        this.getOilList();
                        this.dialogVisible = false;
                        this.clear();
                        this.$message.success(this.$t('addSuccess'))
                    } else {
                        this.$message.error(msg)
                    }
                }
            },
            async getOilList() {
                const {status, data} = await oilList();
                if (status === ERROR_OK) {
                    this.oilList = data;
                } else {
                    this.oilList = [];
                    this.$message.error('No data')
                }
            },
            openEdit(row) {
                this.oil = row;
                this.dialogVisible = true
            },
            async getEquipmentList() {
                const {status, data} = await getEquipment();
                if (status === ERROR_OK) {
                    const list = data.filter(item => item.belongCompany === 'PT.  TEMPOPRESS INTERNATIONAL DELIVERY')
                    this.equipmentList = list
                }
            },
            selectChange(val) {
                if (!val) {
                    this.$set(this.oil, 'unitType', '');
                }
                const target = this.equipmentList.find(item => item.plateNum === val);
                if (target) {
                    this.$set(this.oil, 'unitType', target.equipmentType);
                }
            },
            openAdd() {
                this.dialogVisible = true
            },
            clear() {
                this.oil = {
                    orderNumber: '',
                    orderDateStr: '',
                    oilType: '柴油Fuel',
                    unitNo: '',
                    unitType: '',
                    kmHm: '',
                    qty: '',
                    purpose: '',
                    applicationDepartment: ''
                }
            },
        },
        watch: {
            method() {
                this.getChart()
            },
            plateNum() {
                this.getChart()
            }
        },

    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .content {
        @include content
    }
    label{
        line-height: 32px;
        height: 32px;
        display: inline-block;
        color: #409eff;
        margin-left: 20px;
        cursor: pointer;
    }
</style>